<template>
  <view class="moments-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="24" color="#333" />
      </view>
      <view class="nav-title">动态详情</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 内容滚动区域 -->
    <scroll-view scroll-y="true" class="content-scroll">
      <!-- 动态内容卡片 -->
      <view class="moment-card">
        <!-- 置顶标签 v-if="momentData.isTop" -->
    <view class="sticky-badge">
      <image 
        class="post_top" 
        src="@/static/images/circle_icon_post_top.png" 
        mode="aspectFill"
      />
      <text class="sticky-text">置顶</text>
    </view>
        
        <!-- 用户信息 :src="momentData.avatar || '@/static/images/circle_own_via.png'"-->
    <view class="user-info">
      <image 
        class="user-avatar" 
        src='@/static/images/circle_own_via.png'
        mode="aspectFill"
      />
      <view class="user-details">
        <view class="user-name">{{ momentData.userName || '张师傅' }}</view>
        <view class="post-time">{{ momentData.createTime || '8-24 00:10' }}</view>
      </view>
    </view>
        
        <!-- 动态内容 -->
        <view class="moment-content">
          <view v-if="momentData.tags" class="moment-tags">
            <text class="tag-text">{{ momentData.tags }}</text>
          </view>
          <view class="moment-text">
            {{ momentData.content || '欢迎师傅们来到自己的圈子，在交流页车主圈板块点击「更多」查看更多帖子' }}
          </view>
          <!-- 动态图片 v-if="momentData.images && momentData.images.length > 0" -->
          <view class="moment-images">
            <image 
              v-for="(imge, index) in momentData.images" 
              :key="index"
              :class="momentData.images.length == 1?'blog-one-pic':'blog-pic'"
              :src="imge"
              :mode="momentData.images.length == 1?'aspectFit':'aspectFill'"
              @click="previewImage(index)"
            />
          </view>
          <!-- <view v-else class="moment-images">
            <image 
              class="blog-pic" 
              src="@/static/images/img_car.png"
              mode="aspectFill"
            />
            <image 
              class="blog-pic" 
              src="@/static/images/img_car.png"
              mode="aspectFill"
            />
            <image 
              class="blog-pic" 
              src="@/static/images/img_car.png"
              mode="aspectFill"
            />
          </view> -->
          <view v-if="momentData.location" class="moment-location">
            <!-- <uni-icons type="map" size="12" color="#999" /> -->
            <text class="location-text">{{ momentData.location }}</text>
          </view>
        </view>
        
        <!-- 互动数据 -->
        <view class="interaction-bar">
          <view class="interaction-item-left">
            <text class="interaction-text">浏览{{ momentData.viewCount || '8.5万' }}次</text>
          </view>
          <view class="interaction-item-right">
            <view class="interaction-item" @click.stop="showReplyInput">
              <image 
                class="icon_post" 
                src="@/static/images/circle_icon_post.png" 
                mode="aspectFill"
              />
              <text class="interaction-text">{{ momentData.commentCount || '12189' }}</text>
            </view>
            <view class="interaction-item" @click.stop="toggleLike">
               <!-- :src="isLiked ? '@/static/images/circle_icon_post_good_active.png' : '@/static/images/circle_icon_post_good.png'" -->
              <image 
                class="icon_post" 
                src="@/static/images/circle_icon_post_good.png"
                mode="aspectFill"
              />
              <text class="interaction-text">{{ momentData.likeCount || '8286' }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 评论区域 -->
      <view class="comments-section">
        <!-- 评论标题 -->
        <view class="comments-header">
          <view class="comments-title">评论{{ momentData.commentCount || '0' }}</view>
          <view class="comments-sort">
            <view class="comments-title">点赞{{ momentData.commentCount || '0' }}</view>
          </view>
        </view>
        <view class="comments-sort">
          <text class="sort-text" :class="{ active: sortType === 'latest' }" @click="changeSort('latest')">最新</text>
          <!-- <text class="sort-divider">|</text> -->
          <text class="sort-text" :class="{ active: sortType === 'hottest' }" @click="changeSort('hottest')">最热</text>
        </view>
        
        <!-- 评论列表 -->
        <view v-if="commentsList.length > 0" class="comments-list">
          <view v-for="comment in commentsList" :key="comment.id" class="comment-item">
            <image 
              class="comment-avatar" 
              :src="comment.avatar || '@/static/images/circle_own_via.png'" 
              mode="aspectFill"
            />
            <view class="comment-content">
              <view class="comment-header">
                <text class="comment-user">{{ comment.userName }}</text>
                <text class="comment-time">{{ comment.createTime }}</text>
              </view>
              <view class="comment-text">{{ comment.content }}</view>
              <view class="comment-actions">
                <text class="comment-action" @click.stop="replyToComment(comment)">回复</text>
                <text class="comment-action" @click.stop="likeComment(comment)">
                  {{ comment.isLiked ? '已赞' : '点赞' }}{{ comment.likeCount > 0 ? ' ' + comment.likeCount : '' }}
                </text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 无评论提示 -->
        <view v-else class="no-comments">
          <text class="no-comments-text">还没有评论哟~快去评论吧</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <view class="action-item" @click="showReplyInput" style="border-right: 1rpx solid #AAAAAA;">
        <image 
          class="action-icon" 
          src="@/static/images/circle_icon_post.png" 
          mode="aspectFill"
        />
        <text class="action-text">评论</text>
      </view>
      <view class="seperator-line"></view>
      <view class="action-item" @click="toggleLike">
        <!-- :src="isLiked ? '@/static/images/circle_icon_post_good_active.png' : '@/static/images/circle_icon_post_good.png'" -->
        <image 
            class="action-icon" 
            src="@/static/images/circle_icon_post_good.png"
            mode="aspectFill"
          />
        <text class="action-text">点赞</text>
      </view>
    </view>
    
    <!-- 回复输入框弹窗 -->
    <uni-popup ref="replyPopup" type="bottom" :maskClick="true" :safeArea="true">
      <view class="reply-popup-content">
        <view class="reply-input-container">
          <input 
            class="reply-input" 
            v-model="replyContent" 
            :placeholder="replyPlaceholder" 
            placeholder-class="reply-placeholder"
          />
        </view>
        <view class="reply-actions">
          <button class="cancel-reply-btn" @click="closeReplyPopup">取消</button>
          <button 
            class="submit-reply-btn" 
            :disabled="!replyContent.trim()"
            @click="submitComment"
          >
            发布
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getMomentDetail, replyToMoment, postComment, likeMoment, unlikeMoment } from '@/api/moments/index.js';

export default {
  data() {
    return {
      momentId: '',
      momentData: {
        isTop: true,
        userName: '张师傅',
        createTime: '8-24 00:10',
        avatar: '@/static/images/circle_own_via.png',
        tags: '#分享出车生活，展现司机风采',
        content: '不知道那些双证齐全的司机师傅们在宜春一天能跑多少流水',
        images: [
          require('@/static/images/img_car.png'),
          require('@/static/images/img_user.png'),
          require('@/static/images/official_img__topics_tag.png'),
          require('@/static/images/btn_publish.png'),
          // require('@/static/images/img_car.png')
        ],
        location: '杭州市',
        viewCount: '8.5万',
        commentCount: 12189,
        likeCount: 8286,
        isLiked: false
      },
      commentsList: [],
      sortType: 'latest', // latest: 最新, hottest: 最热
      replyContent: '',
      replyPlaceholder: '写下你的评论...',
      replyTargetId: '',
      replyTargetName: '',
      isLiked: false,
      loading: false
    };
  },
  
  onLoad(options) {
    // 从路由参数中获取信息
    if (options) {
      this.momentId = options.momentId || '1';
    }
    // this.loadMomentDetail();
    // this.loadCommentsList();
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 预览图片
    previewImage(index) {
      console.log(index,'图片索引')
      if (!this.momentData || !this.momentData.images || this.momentData.images.length === 0) {
        return;
      }
      
      // 处理图片路径，确保能正确预览
      const images = this.momentData.images.map(img => {
        // 判断是否是相对路径，如果是则转换为绝对路径
        if (img.startsWith('@/')) {
          return img;
        }
        return img;
      });
      
      // 调用uni.previewImage接口预览图片
      uni.previewImage({
        current: images[index], // 当前显示图片的索引
        urls: images, // 需要预览的图片链接列表
        indicator: 'default', // 显示指示器
        loop: true, // 是否可循环预览
        success: res => {
          console.log('预览图片成功', res);
        },
        fail: err => {
          console.error('预览图片失败', err);
          uni.showToast({
            title: '图片预览失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 加载动态详情
    loadMomentDetail() {
      this.loading = true;
      getMomentDetail(this.momentId).then(res => {
        if (res.code === 0) {
          this.momentData = res.data || {};
          this.isLiked = this.momentData.isLiked || false;
        }
        this.loading = false;
      }).catch(err => {
        console.error('加载动态详情失败:', err);
        // 添加mock数据，确保页面能正常显示
        this.momentData = {
          isTop: true,
          userName: '张师傅',
          createTime: '8-24 00:10',
          avatar: '@/static/images/circle_own_via.png',
          tags: '#分享出车生活，展现司机风采',
          content: '不知道那些双证齐全的司机师傅们在宜春一天能跑多少流水',
          images: [
            '@/static/images/img_car.png',
            '@/static/images/img_car.png',
            '@/static/images/img_car.png'
          ],
          location: '杭州市',
          viewCount: '8.5万',
          commentCount: 12189,
          likeCount: 8286,
          isLiked: false
        };
        this.isLiked = this.momentData.isLiked;
        this.loading = false;
      });
    },
    
    // 加载评论列表
    loadCommentsList() {
      // 这里应该调用获取评论列表的API
      // 由于目前没有看到专门的获取评论列表的API，暂时使用mock数据
      // 实际项目中应该调用相应的API
    },
    
    // 切换评论排序
    changeSort(type) {
      if (this.sortType !== type) {
        this.sortType = type;
        this.loadCommentsList();
      }
    },
    
    // 点赞/取消点赞动态
    toggleLike() {
      if (this.isLiked) {
        // 取消点赞
        unlikeMoment(this.momentId).then(res => {
          if (res.code === 0) {
            this.isLiked = false;
            if (this.momentData.likeCount) {
              this.momentData.likeCount--;
            }
            uni.showToast({
              title: '取消点赞成功',
              icon: 'success'
            });
          }
        }).catch(err => {
          console.error('取消点赞失败:', err);
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          });
        });
      } else {
        // 点赞
        likeMoment(this.momentId).then(res => {
          if (res.code === 0) {
            this.isLiked = true;
            if (this.momentData.likeCount) {
              this.momentData.likeCount++;
            } else {
              this.momentData.likeCount = 1;
            }
            uni.showToast({
              title: '点赞成功',
              icon: 'success'
            });
          }
        }).catch(err => {
          console.error('点赞失败:', err);
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          });
        });
      }
    },
    
    // 点赞评论
    likeComment(comment) {
      // 实际项目中应该调用点赞评论的API
      // 这里只是模拟操作
      comment.isLiked = !comment.isLiked;
      if (comment.isLiked) {
        comment.likeCount = (comment.likeCount || 0) + 1;
      } else {
        comment.likeCount = Math.max(0, (comment.likeCount || 0) - 1);
      }
    },
    
    // 显示回复输入框
    showReplyInput() {
      this.replyContent = '';
      this.replyPlaceholder = '写下你的评论...';
      this.replyTargetId = '';
      this.replyTargetName = '';
      this.$refs.replyPopup.open();
    },
    
    // 回复评论
    replyToComment(comment) {
      this.replyContent = '';
      this.replyPlaceholder = `回复@${comment.userName}`;
      this.replyTargetId = comment.id;
      this.replyTargetName = comment.userName;
      this.$refs.replyPopup.open();
    },
    
    // 关闭回复弹窗
    closeReplyPopup() {
      this.$refs.replyPopup.close();
    },
    
    // 提交评论
    submitComment() {
      if (!this.replyContent.trim()) {
        return;
      }
      
      const commentData = {
        momentId: this.momentId,
        content: this.replyContent
      };
      
      if (this.replyTargetId) {
        commentData.replyUserId = this.replyTargetId;
        commentData.replyUserName = this.replyTargetName;
      }
      
      postComment(commentData).then(res => {
        if (res.code === 0) {
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          });
          this.closeReplyPopup();
          // 刷新评论列表
          this.loadCommentsList();
          // 更新评论数
          if (this.momentData.commentCount) {
            this.momentData.commentCount++;
          } else {
            this.momentData.commentCount = 1;
          }
        } else {
          uni.showToast({
            title: res.msg || '评论失败，请重试',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('评论失败:', err);
        uni.showToast({
          title: '网络异常，请重试',
          icon: 'none'
        });
      });
    }
  }
};
</script>

<style scoped>
.moments-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 顶部导航栏 */
.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.nav-right {
  width: 88rpx;
  height: 88rpx;
}

/* 滚动区域 */
.content-scroll {
  flex: 1;
}

/* 动态内容卡片 */
.moment-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 置顶标签 */
.sticky-badge {
  color: #FC893F;
  font-size: 24rpx;
  padding-bottom: 18rpx;
  display: flex;
  align-items: center;
}

.post_top {
  width: 32rpx;
  height: 32rpx;
  margin-right: 4rpx;
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.post-time {
  font-size: 24rpx;
  color: #999;
}

/* 动态内容 */
.moment-content {
  margin-bottom: 20rpx;
}

.moment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 14rpx;
  margin-top: 16rpx;
}

.blog-pic {
  width: 191rpx;
  height: 191rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  margin-right: 14rpx;
  margin-bottom: 16rpx;
}
.blog-one-pic {
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.blog-pic:nth-child(3n){
  margin-right: 0
}

.moment-tags {
  margin-bottom: 16rpx;
}

.tag-text {
  font-size: 28rpx;
  color: #FF7F50;
}

.moment-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.moment-location {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 26rpx;
  color: #999;
  background: #F4F5F6;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  padding: 4rpx 12rpx;
  width: fit-content;
}

/* 互动栏 */
.interaction-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.interaction-item-left {
  flex: 1;
}

.interaction-item-right {
  display: flex;
  align-items: center;
  gap: 40rpx;
}

.interaction-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.icon_post {
  width: 32rpx;
  height: 32rpx;
}

.interaction-text {
  font-size: 28rpx;
  color: #B4B4C2;
}

/* 评论区域 */
.comments-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 评论标题 */
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30rpx;
  /* border-bottom: 1rpx solid #f0f0f0; */
}

.comments-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.comments-sort {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.sort-text {
  font-size: 28rpx;
  color: #999;
}

.sort-text.active {
  color: #333333;
}

.sort-divider {
  font-size: 28rpx;
  color: #ddd;
}

/* 评论列表 */
.comments-list {
  padding-top: 30rpx;
}

.comment-item {
  display: flex;
  gap: 20rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 30rpx;
}

.comment-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.comment-user {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.comment-actions {
  display: flex;
  gap: 30rpx;
}

.comment-action {
  font-size: 26rpx;
  color: #999;
}

/* 无评论提示 */
.no-comments {
  padding: 60rpx 0;
  text-align: center;
}

.no-comments-text {
  font-size: 28rpx;
  color: #999;
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 80rpx; */
  border-top: 1rpx solid #eee;
  z-index: 100;
}

.action-item {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  gap: 8rpx;
  flex: 1;
}

/* .seperator-line {
  height: 36rpx;

} */

.action-icon {
  width: 40rpx;
  height: 40rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

/* 回复弹窗 */
.reply-popup-content {
  padding: 30rpx;
  background-color: #fff;
}

.reply-input-container {
  width: 100%;
  height: 200rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.reply-input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  padding: 0;
}

.reply-placeholder {
  color: #999;
}

.reply-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cancel-reply-btn,
.submit-reply-btn {
  width: 320rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 46rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.cancel-reply-btn {
  background-color: #f5f5f5;
  color: #666;
}

.submit-reply-btn {
  background-color: #FF7F50;
  color: #fff;
}

.submit-reply-btn:disabled {
  background-color: #ccc;
  color: #fff;
}
</style>